<template>
  <view
    class="calendar"
    :class="calendarClass"
  >
    <view class="calendar__header">
      <block v-if="showTitle">
        <view class="calendar__header-title">
          <slot name="title"></slot>
        </view>
        <view class="calendar__header-title">{{ title }}</view>
      </block>
      <view
        class="calendar__header-control"
        v-if="showControl"
      >
        <picker
          mode="date"
          :value="currentDate"
          :start="startDate"
          :end="endDate"
          fields="month"
          @change="bindDateChange"
          @cancel="bindDateCancel"
        >
          <view class="calendar__picker">
            <van-icon
              name="label-o"
              color="#ff6600"
              size="18px"
            />
            <view class="calendar__picker-value">
              {{ currentMonthTitle }}
            </view>
          </view>
        </picker>
        <van-button
          class="calendar__control-prev"
          icon="arrow-left"
          round
          :disabled="!canPrev"
          @click="switchPrev"
        />
        <van-button
          class="calendar__control-next"
          icon="arrow"
          round
          :disabled="!canNext"
          @click="switchNext"
        />
      </view>
      <slot name="actions"></slot>
    </view>
    <view class="calendar__weekdays">
      <view
        v-for="(item,index) in weekdays"
        :key="index"
        class="calendar__weekday"
      >
        {{ item }}
      </view>
    </view>
    <view
      class="calendar__body"
      :style="swiperStyle"
    >
      <calendar-month
        :date="date"
        :min-date="min"
        :max-date="max"
        :formatter="formatter"
        :refresh="refresh"
        @click="onClickDay"
      />
    </view>
  </view>
</template>

<script>
import {
  CELL_WIDTH
} from './utils'
import CalendarMonth from './month'
export default {
  name: 'Calendar',
  components: {
    CalendarMonth
  },
  props: {
    title: {
      type: String,
      value: '日期选择'
    },
    customClass: String,
    color: String,
    show: Boolean,
    formatter: null,
    date: {
      type: null,
      observer (val) {
        console.log('set default date')
      }
    },
    min: {
      type: null,
      default: new Date(
        new Date().getFullYear() - 1,
        new Date().getMonth(),
        new Date().getDate()
      ).getTime()
    },
    max: {
      type: null,
      default: Date.now()
    },
    cellWidth: {
      type: Number,
      default: CELL_WIDTH
    },
    showTitle: {
      type: Boolean,
      value: true
    },
    showControl: {
      type: Boolean,
      default: true
    },
    firstDayOfWeek: {
      type: Number,
      default: 0
    },
    refresh: {
      type: Boolean,
      default: false
    },
    sticky: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      subtitle: '',
      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
      currentTime: Date.now()
    }
  },
  watch: {
    currentTime (v, o) {
      const nowDate = new Date(v)
      const nowMonth = nowDate.getMonth()
      const oldMonth = new Date(o).getMonth()
      if (nowMonth !== oldMonth) {
        console.log(nowMonth, oldMonth)
        console.log(v, nowDate)
        this.onChangeMonth(nowDate)
      }
    }
  },
  computed: {
    calendarClass () {
      let classes = [this.customClass]
      if (this.sticky) {
        classes.push('.calendar--sticky')
      }
      return classes.join(' ')
    },
    currentDate () {
      return this.$moment(this.currentTime).format('YYYY-MM-DD')
    },
    currentMonthTitle () {
      return this.$moment(this.currentTime).format('Y[年]M[月]')
    },
    startDate () {
      return this.$moment(this.min).format('YYYY-MM-DD')
    },
    endDate () {
      return this.$moment(this.max).format('YYYY-MM-DD')
    },
    canPrev () {
      const currentDate = this.$moment(this.currentTime).endOf('month')
      const minDate = this.$moment(this.min).endOf('month')
      return currentDate.diff(minDate, 'months') > 0
    },
    canNext () {
      const currentDate = this.$moment(this.currentTime).endOf('month')
      const maxDate = this.$moment(this.max).endOf('month')
      return maxDate.diff(currentDate, 'months') > 0
    },
    swiperStyle () {
      if (this.cellWidth !== CELL_WIDTH) {
        return `--square-width-percent: ${this.cellWidth}%`
      }
      return ''
    }
  },
  mounted () {
    console.group('CalendarMounted')
    console.log('min:', this.min)
    console.log('max:', this.max)
    console.log('mounted', this.currentDate)
    console.groupEnd('CalendarMounted')
  },
  methods: {
    onChangeMonth (e) {
      console.log('Calendar emit month changed.')
      this.$emit('change', e)
    },
    // 点击标题切换当前页时改变样式
    switchNext () {
      if (this.canNext) {
        this.currentTime = this.$moment(this.currentTime).add(1, 'month').valueOf()
      }
    },
    // 点击标题切换当前页时改变样式
    switchPrev () {
      if (this.canPrev) {
        this.currentTime = this.$moment(this.currentTime).add(-1, 'month').valueOf()
      }
    },
    bindDateChange (e) {
      console.log('picker发送选择改变，携带值为', e.mp.detail.value)
      this.currentTime = (new Date(e.mp.detail.value)).getTime()
      console.log(this.currentDate)
    },
    bindDateCancel (e) {
      // this.notice()
    },
    reset () {
      this.currentTime = this.getInitialDate()
    },
    getInitialDate () {
      return this.defaultDate || this.min
    },
    onClickDay (item) {
      const date = new Date(item.date)
      this.currentTime = date.getTime()
      this.$emit('select', date)
    }
  }
}
</script>

<style lang="less">
@import "./index.less";
</style>
